<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import MyAxios from "../plugins/myAxios.ts";

const router = useRouter();
const teamList = ref([]);
const currentUser = ref(null);
onMounted(async () => {
  const storedCurrentUser = localStorage.getItem('currentUser');
  if (storedCurrentUser) {
    currentUser.value = JSON.parse(storedCurrentUser);
  }

  const res = await MyAxios.post('/team/page', {
    pageNum: 1,
    pageSize: 10
  }).then(function (response) {
    console.log("/team/page success", response);
    return response?.data?.records;
  }).catch(function (error) {
    console.error("/team/page error", error);
  })
  teamList.value = res;
})

const searchText = ref('');

const onSearch = async () => {
  const res = await MyAxios.post('/team/page', {
    pageNum: 1,
    pageSize: 10,
    searchKey: searchText.value
  })

  if (res.code === 0) {
    teamList.value = res?.data?.records;
  }
}

const toCreateTeam = () => {
  router.push("/team/create")
}

</script>

<template>
  <van-search
      v-model="searchText"
      placeholder="模糊搜索队名或者描述"
      input-align="center"
      @search="onSearch()"
      style="width: 80%;"
  />
  <van-button style="opacity: 0.7;" class="add-button" type="primary" icon="plus" @click="toCreateTeam" />
  <TeamCardList :team-list="teamList" :current-user="currentUser"/>
  <van-empty image="search" v-if="!teamList || teamList.length<1" description="暂无搜索结果"/>
</template>

<style scoped>

</style>